and
tag pair, although the end-tag is not needed if another paragraph starts with astart-tag. Paragraphs may be aligned, with the "align=" command, for example:
A standard paragraph
Center aligned paragraph
Left aligned paragraph
Right aligned paragraph
Line breaks are enforced with the
tag. When an HTML viewer
encounters the
tag, the cursor is moved down one line and to the
left of the window. If an alignment is in operation, the next
displayed line will be aligned correctly.
Horizontal rules are affected with the
tag. This tells the HTML viewer to display a graphical horizontal line across the entire width of the window. The form of the rule can be amended with the optional "size=", "width=", "noshade" and "align=" parameters. The vertical thickness of the horizontal rule can be defined by adding a size= parameter to the
tag. The number following the size= parameter tells the HTML viewer how many vertical pixel lines to use for the rule. For example:
By default, a horizontal rule extends the entire width of the window. The width= parameter may be used to specify the horizontal width of the rule either in pixels, or as a percentage of the window width:
Horizontal rules are usually aligned in the centre of the window, or if an alignment is in force, they follow the rules of the current alignment. This may be overridden by the align= parameter, for example:
Finally, horizontal rules are displayed in a 3d representation. This can be changed to a solid thick 2 dimensional line with the noshade parameter:
As usual, these parameters can be mixed together, for example:
Images Most newer HTML viewers can display pictures, called images, in various forms. The most popular being GIF and JPEG formats. The procedure for telling the HTML viewer to display the image is the same regardless of the image format:
Will cause the HTML viewer to display the image "picture.gif".
Some HTML viewers cannot display images, so you can provide text which
will be displayed by these viewers instead of the image by including
it with the "alt=" parameter, for example:
The image may be aligned in relation to the surrounding text using the
optional "align=" parameter. If no alignment parameter is specified,
text following the image will be displayed at the bottom right of the
image. Different HTML viewers handle the alignment of text and images
differently, so be careful!
The size of the image can be declared to the HTML viewer with the
optional "width=" and "height=" parameters. If these are not
specified, the HTML viewer will display the image at its full size. If
however you specify these size parameters, the image will be displayed
to the specified size in pixels. For example:
Lists
HTML supports a number of types of list: Ordered, Unordered,
Definition, Menu and Directory.
Ordered lists are displayed one item per line, with a sequential
numbering system to the left of each item. An ordered list is declared
by the start-tag - and terminated with the end-tag
- Item one
- Item two
- Item three
-
Which then produces the following display:
100. Item one
101. Item two
102. Item three
The numbering order may be further amended during the list by adding a
VALUE= command to a list item declaration, for example:
- Item one
- Item two
- Item three
- Item one
- Item two
- Item three
- Item one
- Item two
- Item three
- , it uses a pair of tags, data-term and
data-definition,
- and
- respectively. The data-definition is displayed indented from the preceding data-term. For example:
- Definition one
- Description of definition one which can wrap around to more than one line
- Definition two
- Description two which can wrap around
to more than one line - Definition three
- Description of definition three
Local hyperlinks:
Local hyperlinks, known as "Fragment Identifiers", are defined in a
hypertext address by a # character following the resource. If
navigation is required within the local document, the resource may be
omitted so that a local hyperlink may look like:
Introduction
Selecting this hyperlink will cause the HTML viewer to search the
current document for a declaration of "introduction". This declaration
is achieved with the anchor name tag , like this:
Notice that the tag does not have an end-tag, and is case
insensitive. It doesn't matter if the anchor name is declared as
"INTRODUCTION" or "Introduction" or even "introDuction" it will still
be found by a hyperlink to "#introduction".
Local hyperlinks can be added to hyperlinks to external documents to
force the HTML viewer to load an external document and then navigate
straight to a desired section within that document.
For example:
Life and Love
Will create a hyperlink to the anchor "section_3" within the HTML
document "part_two.htm".
The following HTML document illustrates the use of local hyperlinks to
form a table of contents to a document. Although this document is very
short, you can see how the principle can be applied to longer and more
complex documents.
Local Hyperlink Example HTML document Contents
AegirIn Norse mythology, Aegir is the god of the sea.
The Aesir were the principal gods in Norse mythology. They lived in Asgard.
In Norse mythology Asgard was the home of the gods.
In Norse mythology, Bertha is the goddess of spinning.
In Norse mythology, Bragi is the god of poetry and eloquence. He was married to the goddess Iduna who dwelt in the underworld. Netscape introduced a number of new commands for hyperlinks. TARGET= can be used to open the hyperlink document in a new instance of the HTML viewer, or a specified frame. More about frames later. For example: Next Document When the hyperlink "Next Document" is selected, the document "next.htm" will be opened and displayed in a new instance of the HTML viewer. Hyperlinks are not restricted to other HTML documents. They can be used to access news servers, gopher servers, send mail and access ftp servers. A hyperlink to send mail uses the URL "mailto:" For example the following link attempts to send an email message to me: Feedback Some HTML viewers will also support the addition of an optional subject, to save the user typing it in. For example: Feedback Files can be sent to the user through FTP links, to send a specific file, use something like: < A HREF="ftp://server/path/filename">Download file For example: Download BBSC70.ZIP The HTML viewer will usually contact the FTP server, and attempt to connect using the name "anonymous" and sending the user's email address as a password. Linking to a gopher server is achieved with the URL gopher:// for example: Linking to a WAIS index server is achieved with the wais:// URL, for example: Linking to a news server is achieved with the nntp:// URL, for example: Image Maps Image maps are a number of links defined as areas of a displayed image. They can be thought of as two distinct components, a map and an image. The map giving instructions as to the links and the image simply being a standard inline image. Each pixel of the image can be a link to another URL if required, but more usually different areas of the image link to different URLs. The following example illustrates the use of a simple image map. The image is displayed as normal with an
tag, but with the addition of the USEMAP command to indicate that the inline image is an image map. For example:
The map component may be processed by the HTML viewer (a client side
image map) or by the HTTP server if the HTML viewer cannot process
maps.
A server image map is defined by adding the command ISMAP to the tag, for example:
In this case, the HTML viewer will expect the map information to be
processed by the server.
A client side image map (CSIM), however, is a map processed by the
HTML viewer, which gets the map information from an HTML document
found by the hyperlink following the USEMAP= command, in this case it
follows later in the same document, and occurs between the tags:
The first line tells the HTML viewer that this is a map, and assigns
it a unique name, in this case "sample". The next three lines define
three link areas within the image. Each area is defined with one the
forms:
or
or
These co-ordinates are pixel co-ordinates within the image and define
a region within which the link occurs. The SHAPE=RECT command expects
a rectangular region described by two pairs of co-ordinates. The
SHAPE=CIRCLE command expects a circular region described by the co-
ordinates of the circle centre, followed by the radius. The final
example, SHAPE=POLY describes a multi-sided area.
Here is the complete HTML example with blank lines inserted to make it
easier to read and determine the individual areas:
Example Image Map This Is An Image Map Example
. You can specify a border and its width in pixels for the table by adding a BORDER= command to the table start-tag, for example: Will give the displayed table a border 1 pixel wide. A wider border can be forced with BORDER=10 for example:
The spacing between the cells can also be determined in pixels with the CELLSPACING= command. If you want a 10 pixel gutter between the table cells add the command CELLSPACING=10 to the table start-tag:
The spacing between the cell walls and the enclosed data can also be determined in pixels with the CELLPADDING= command. If you want a 10 pixel gutter between the table cell walls and the data in the cell add the command CELLPADDING=10 to the table start-tag:
Finally the width of the table can be expressed in pixels, or as a ratio of the document window width with the WIDTH= command;
Putting this together we might want a table 200 pixels wide, with a cell spacing of 5 pixels and a border of 4 pixels width. The following table start-tag will achieve this:
A caption can be included for the table with the caption tags . The text or image contained within the caption tags will usually be displayed centred at the top of the table, just above the top border line. You can force the caption to be displayed below the table by adding the ALIGN=BOTTOM command to the caption start-tag, for example:
and This caption displays above the table
Table cells are defined in terms or rows and within the rows, columns (either "table header" or "table data" cells). A table row is defined within the tags and , for example: .....This caption displays below the table
A table header column is defined within a row by the tags and , for example;
Table header cells are, by default, displayed in BOLD and aligned in the centre both horizontally and vertically. A table data column is defined within a row by the tags and , for example;This is a table!
Table data cells are, by default, aligned left and vertically centred within the cell. Each table column may have individual alignment characteristics defined by the ALIGN= and VALIGN= commands which override the default settings. The ALIGN= command can be used to force the display to the left or right of the cell, and the VALIGN= command to force the display to the top or bottom of the cell for example:This is a table! Table Example
You can stop the HTML viewer from word-wrapping the text within a cell by adding the command NOWRAP to the cell definition, for example: This text will be displayed as one long line The size of the cell can be determined, to a degree, with the COLSPAN= and ROWSPAN= commands. These tell the HTML viewer how many columns and rows the cell is to span in relation to the rest of the table. For example:Table Caption Cell One is aligned to the left and in the centre vertically Cell Two has multiple lines
in it
and is displayed to the left of the cell
Cell Three is centred horizontally, at the top of the cell
Cell Four is another multiple line cell
displayed to the right
Simple Table
Blank or empty cells can be defined to force cells within a row to the right, for example: Putting these concepts together, quite complex tables can be constructed, for example:Protoplasm Plants Invertebrates Vertebrates Evolution
Microsoft's Internet Explorer supports use of the BGCOLOR= command in the tag. It allows the background colour of the table to be specified using a standard rrggbb hex triplet. For example:A Simplified Overview of Evolution Protoplasm Single-cell Plant Animals Bacteria Invertebrates Fungi Vertebrates Sponges Ringed Worms Jelly fish Mosses Sharks Sea Squirts Lancelets Cone shells Spiders Snails Insects Conifers Ferns Flowering Plants Amphibians Bony Fishes Reptiles Newts Frogs Mammals Crocodiles Lizards Ungulates Carnivores Apes Rodents Marsupials Cattle Deer Cats Civets Weasels Monkeys Gorillas Man Microsoft's Internet Explorer includes support for the BORDERCOLOR= command which sets the border colour of the table. It takes as a parameter a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main
tag for border colouring to work. Microsoft's Internet Explorer allows use of the BORDERCOLORLIGHT= command to set independently, the lighter colour to be displayed on a 3-dimensional
border. It is the opposite of BORDERCOLORDARK. It takes a colour parameter defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main
tag for border colouring to work. Microsoft's Internet Explorer allows use of the BORDERCOLORDARK= command to set independently, the darker colour to be displayed on a 3- dimensional
border. It is the opposite of BORDERCOLORLIGHT. It takes as a parameter a colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main
element for border colouring to work. NOTE : The BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT and BORDERCOLORDARK attributes can also be used in and element, which in turn over-rides any colour settings in the
element. Some HTML viewers support the placing of background images images inside the, tags, with the colour defined in the last element over-riding those defined before. E.g. if a element contains a BORDERCOLOR attribute setting, the setting specified will be used instead of any colour settings that may have been specified in the , , and tags have been declared. It affects the display of the internal table borders ("rules"). It can accept the following parameters: none this removes all the internal rules basic this displays horizontal borders between the , and sections rows this displays horizontal borders between all rows cols this displays horizontal borders between all columns all this displays all the internal rules. Internet Explorer provides the and tag pair which can be used within a
definition to group columns together to set their alignment properties. It accepts the following attributes: ALIGN="center|justify|left|right" This sets the text alignment within the column group. The default value is "center" VALIGN="baseline|bottom|middle|top" This sets the vertical text alignment within the column group. SPAN= This can be used to set the number of columns upon which the ALIGN and VALIGN attributes are to act. An example of an Internet Explorer enhanced table:and tags. If used in the element, the image will be tiled behind all of the table cells. For example: Fixing Column Widths: The HTML viewer property of displaying images within table cells can be exploited to create fixed column widths in a table, where the data contained within the colmns varies in width. Normally, the HTML viewer generates columns based upon the widest element in the table column, creating uneven column widths. However, by forcing one cell in each column to a desired width, as wide or wider than the widest cell, you can create even column widths. One way to do this is to create a GIF image, of a single colour 2 x 2 pixels in size and make it transparent. Being so small this image will occupy a neglible amount of disk space and load even remotely very fast. Then this image can be used as an invisible element within a table cell to widen the cell as desired. The following example does not work with Mosaic, which does not support the image HEIGHT= and WIDTH= commands within a table cell, but it does work with Internet Explorer:
Table
Setting Table Borders: Internet Explorer supports the use of the FRAME= command which requires the BORDER= command to be set and affects the display of the table borders. It can accept any of the following parameters: void this removes all the external borders above this displays external borders at the top of the table only below this displays external borders at the bottom of the table only hsides this displays external borders at the horizontal sides of the table. I.e. at the top and bottom of the table. lhs this displays external borders at the left hand edges of the table only rhs this displays external borders at the right hand edges of the table only. vsides this displays external borders at both left and right hand edges of the table box this displays a box around the table (i.e. top, bottom, left and right hand sides) Internet Explorer supports the RULES= command. It requires the BORDER value to be set and may only be used in tables where theFixed Width Table Demonstration
1.00
8654.88
7430456.7846.00 87134.93 4031565.42 51.00 554.10 440436.67 11.00 6414.43 472816.72 83.00 9824.01 734436.63 IE Table
CONTROLLING DOCUMENT BACKGROUNDS THE BACKGROUND ATTRIBUTE Recent versions of the proposed HTML 3.0 spec. have added a BACKGROUND attribute to the BODY tag. The purpose of this attribute is to specify a URL pointing to an image that is to be used as a background for the document. In Mosaic 2.1.1, Netscape and Internet Explorer, this background image is used to tile the full background of the document- viewing area. Thus specifying: Document here would cause whatever text, images, etc. appeared in that document to be placed on a tiled background image. If you prefer, a single large image may be displayed which does not scroll when the document window does by adding the command BGPROPERTIES=FIXED, for example: Document here THE BGCOLOR ATTRIBUTE Although not standard HTML, it is possible to define the colour of the background displayed by most modern HTML viewers, including Mosaic 2.1.1, Netscape Navigator and Microsoft Internet Explorer with the BGCOLOR= command. Document here Where "#rrggbb" is a hexadecimal red-green-blue triplet used to specify the background colour. TEXT ATTRIBUTES Like the BGCOLOR= command, the TEXT= command controls the attribute of normal text displayed in a document. Document here THE LINK, VLINK, AND ALINK ATTRIBUTE These attributes let you control the colouring of link text. VLINK stands for visited link, and ALINK stands for active link. The default colouring of these is: LINK=blue, VLINK=purple, and ALINK=red. Again the format for these attributes is the same as that for the BGCOLOR= and TEXT= commands. For example: Document here Putting it all together, here is an example from Netscape which illustrates a use of global colour attributes:This is the table caption These are heading cells These are body cells X X X X X X X X X X X X X X X X X Colour Control Example This is an example document. Text is light-grey on black, and anchors are yellow at first, flashing blue-green when activated, and pale green if already visited. Notice that Mosaic and Internet explorer do not support the ALINK= command, it doesn't do any harm, unrecognised commands are simply ignored! This is just one of the many discrepancies between the various HTML viewers. Controlling individual text attributes: Some new HTML viewers, notably Netscape Navigator and Microsoft Internet Explorer support a new tag, . The tag enables the HTML author to specify a font size , colour and typeface. The size ranges from 1 to 7, smallest to largest. The colour takes a standard rgb hexadecimal triplet to define the attribute of the text within the and tags. For example: This is a Large Red Heading in Arial Font The font size can also be determined relative to the base font size using + and - in the FONT SIZE= command, for example: This is the next size up from the standard text This is the next size down from the standard text The base font size, colour and typeface can similarly be set with the BASEFONT command, for example:Will set the base font size to slightly larger than the default, which is size 3. You can specify the name of different faces, for example: the HTML viewer will use "courier" if "arial" is not available on the system, or "geneva" if courier is not available either. Preventing line breaks: Both Netscape and Internet Explorer support the and tag pair which prevent a long line from being broken. Instead the document view window must be scrolled to the right by the user with the scroll- bar to view the remainder of the text line. For example:The Abecedarian were the followers of Nicholas Storck, a 16th century German Anabaptist. They were so called because they rejected all worldly knowledge including learning the alphabet. Multi-Column Text: Currently, multi-column text only seems to be supported by Netscape Navigator. It is defined with the tag pairand , for example:This is multiple column text displayed by Netscape Navigator Displays the text within the multicol tags in 4 columns. The column widths and gutter between the columns can be defined by adding the WIDTH= and GUTTER= commands to thetag. Scrolling: Microsoft's Internet Explorer supports scrolling lines of text, which are declared by the
- , and rather than
using the list item tag